@function unit($px) {
  @return $px * 2rpx;
}

@import './mixin.scss';
@import './display.scss';
@import './flex.scss';
@import './typography.scss';
@import './border.scss';
@import './color.scss';
@import './spacing.scss';

page {
  background-color: $com-color-body-bg;
  color: $com-color-content;
  font-size: $com-text-md;
  line-height: 1.5;
}

// 隐藏scroll-view的滚动条
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  appearance: none;
  background: transparent;
}

.com-icon-wrap {
  @include flex;
  align-items: center;
}

.com-hover-class {
  opacity: 0.6;
}

.com-text-price {
  &::before {
    content: '¥';
    margin-right: 2px;
    font-size: 80%;
  }
}

.com-text-x {
  color: $com-color-tips;

  &::before {
    content: 'x';
    margin-right: 2px;
    font-size: 80%;
  }
}

/* ================
		Cell
================ */
.com-cell {
  @include flex;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: $com-spacing-col-base $com-spacing-row-base;
  overflow: hidden;
  background-color: $com-color-content-bg;
  line-height: unit(24);

  &:not(:last-child)::after {
    content: ' ';
    position: absolute;
    right: 0;
    bottom: 0;
    left: $com-spacing-row-base;
    box-sizing: border-box;
    transform: scaleY(0.5);
    border-bottom: 1px solid $com-color-border;
    pointer-events: none;
  }

  .com-cell__left-icon {
    @include flex;
    align-items: center;
    margin-right: unit(4);
  }

  .com-cell__hd {
    flex: none;
    width: unit(85);
  }

  .com-cell__bd,
  .com-cell__ft {
    flex: 1;
  }

  .com-cell__ft {
    position: relative;
    overflow: hidden;
    color: $com-color-tips;
    text-align: right;
    vertical-align: middle;
  }
}

.com-arrow {
  position: relative;
  padding-right: $com-spacing-row-base;

  &::after {
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 2px;
    width: unit(8);
    height: unit(8);
    margin-top: unit(-5);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    border-width: 1.5px 1.5px 0 0;
    border-style: solid;
    border-color: $com-color-tips;
  }

  &.up {
    &::after {
      transform: rotate(-45deg);
    }
  }

  &.down {
    &::after {
      transform: rotate(135deg);
    }
  }

  &.left {
    padding-right: 0;

    &::after {
      position: relative;
      top: auto;
      transform: rotate(-135deg);
    }
  }
}

/* ================
		Section
================ */
.com-section {
  position: relative;
  padding: $com-spacing-col-base $com-spacing-row-base;
  background-color: $com-color-content-bg;

  & + .com-section {
    margin-top: $com-spacing-col-base;
  }

  &.card {
    margin: $com-spacing-col-base $com-spacing-row-base;
    overflow: hidden;
    border-radius: $com-border-radius-base;
  }

  .com-cell {
    padding: $com-spacing-col-base 0;

    &::after {
      right: $com-spacing-row-base;
    }
  }

  .com-border-bottom::after,
  .com-border-top::after {
    &::after {
      right: $com-spacing-row-base;
      left: $com-spacing-row-base;
    }
  }
}

/* ================
		按钮
================ */
.com-button {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  position: relative;
  box-sizing: border-box;

  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: unit(32);
  margin: 0;
  padding: 0 $com-spacing-row-base;
  transition: opacity 0.2s;
  transition: opacity 0.2s;
  border-radius: $com-border-radius-sm;
  outline: none;
  font-size: $com-text-md;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;

  &::before {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: inherit;
    border-radius: inherit;
    border-color: currentcolor;
    opacity: 0;
    background-color: currentcolor;
  }

  &:active::before {
    opacity: 0.1;
  }

  &.disabled::before,
  &.loading::before {
    display: none;
  }

  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .plain,
  &:not([class*='-bg']) {
    border: 1px solid currentcolor;
    background-color: $com-color-content-bg;
  }

  & + & {
    margin-left: unit(8);
  }

  &.sm {
    height: unit(24);
    padding: 0 unit(10);
    font-size: $com-text-sm;
  }

  &.lg {
    height: unit(40);
    padding: 0 unit(20);
    font-size: $com-text-lg;
  }

  &.block {
    @include flex;
    height: unit(44);
    padding: 0 unit(20);
    font-size: $com-text-lg;
  }

  &.circle {
    width: unit(32);
    height: unit(32);
    padding: 0;
    border-radius: 9999px;
  }
}

/* ================
		Fixed
================ */
.com-fixed-top {
  position: fixed !important;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
}

.com-fixed-bottom {
  position: fixed !important;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
}

.com-mask,
.com-mask-transparent {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.com-mask {
  background-color: $com-color-mask-bg;
}
